import React from "react";
import { Layout, Typography, Row, Col, List, Button, Space, Tag } from "antd";
import { SmileOutlined } from "@ant-design/icons";
import styles from "./index.module.less";

const { Title, Text } = Typography;

interface TaskItem {
  id: string;
  title: string;
  status: string;
  date: string;
}

interface NoteItem {
  icon: React.ReactNode;
  content: string;
}

const taskList: TaskItem[] = [
  {
    id: "#8764",
    title: "编码通AI助手和DevAge...",
    status: "InProgress",
    date: "2025-04-29 - 2025-04-30",
  },
  // 可以添加更多任务项
];

const noteList: NoteItem[] = [
  {
    icon: <SmileOutlined data-oid="46gg5n1" />,
    content: "逐步明确AI辅助前端提效项...",
  },
  // 可以添加更多笔记
];

const quickLinks = [
  { label: "签到签退", href: "#" },
  { label: "一事通", href: "#" },
  { label: "任务中心", href: "#" },
  { label: "会议预约", href: "#" },
];

const WorkMatters: React.FC = () => {
  return (
    <Layout className={styles.container} data-oid="wah51t.">
      <Row gutter={24} data-oid="v9yvyhq">
        <Col span={12} data-oid="te:g6r9">
          <div className={styles.panel} data-oid="0dzezz5">
            <div className={styles.header} data-oid=":o34m7e">
              <Title level={2} data-oid="pq_1.k:">
                工作事项
              </Title>
              <Text type="secondary" data-oid="97mavk9">
                (最近更新时间：2025-05-06 05:59 | 仅展示创建时间在90天内的卡片)
              </Text>
              <Text type="secondary" data-oid="4q7mf3h">
                卡片 160 | 缺陷 0 | 重点关注 0
              </Text>
            </div>

            <List
              className={styles.taskList}
              dataSource={taskList}
              renderItem={(item) => (
                <List.Item className={styles.taskItem} data-oid="dlzzhgb">
                  <div className={styles.taskInfo} data-oid="_45953s">
                    <Text strong data-oid="c:-ubtd">
                      {item.id} {item.title}
                    </Text>
                    <Tag color="processing" data-oid="-6wdl.4">
                      {item.status}
                    </Tag>
                    <Text type="secondary" data-oid="6314j5s">
                      {item.date}
                    </Text>
                  </div>
                  <Space data-oid="4q4-t:5">
                    <Button type="link" data-oid="8t_pkv-">
                      报工
                    </Button>
                    <Button type="link" data-oid="lfc:3sw">
                      归档
                    </Button>
                  </Space>
                </List.Item>
              )}
              data-oid="8wfzwr1"
            />
          </div>
        </Col>

        <Col span={12} data-oid="k:hn9ub">
          <div className={styles.panel} data-oid="2_zdu-j">
            <div className={styles.header} data-oid="w0hg4sk">
              <Title level={2} data-oid="qfskjdi">
                回顾会
              </Title>
              <Text type="secondary" data-oid="hofv1qn">
                (最近更新时间：2025-05-06 14:17)
              </Text>
              <Text data-oid="x.b4_:-">
                工程技术改进组回顾会会议纪要（3月28日） 2025-04-07
              </Text>
            </div>

            <List
              className={styles.noteList}
              dataSource={noteList}
              renderItem={(item) => (
                <List.Item className={styles.noteItem} data-oid="qu:rxxt">
                  <span className={styles.noteIcon} data-oid="9_ij2w3">
                    {item.icon}
                  </span>
                  <Text data-oid="_l1.sk_">{item.content}</Text>
                </List.Item>
              )}
              data-oid="zqmwz:4"
            />

            <div className={styles.quickLinks} data-oid="9rbhah7">
              {quickLinks.map((link, index) => (
                <Button
                  key={index}
                  type="link"
                  href={link.href}
                  className={styles.linkItem}
                  data-oid="uo2ua.j"
                >
                  {link.label}
                </Button>
              ))}
            </div>
          </div>
        </Col>
      </Row>
    </Layout>
  );
};

export default WorkMatters;
